import React, { Component, Fragment } from 'react'
class Map extends Component {
  constructor(props) {
    super(props)
    this.state = {}
    this.drawBikeRoute = this.drawBikeRoute.bind(this)
    this.drwaServiceArea = this.drwaServiceArea.bind(this)
  }
  componentDidMount() {
    this.map = new window.BMap.Map('mapcontent') // 创建Map实例 前面必须要加上window 否则BMap是undifined
    this.map.centerAndZoom(new window.BMap.Point(117.213813248, 39.094423482)) // 初始化地图,设置中心点坐标和地图级别
    this.map.addControl(new window.BMap.ScaleControl())
    this.map.addControl(
      new window.BMap.NavigationControl({
        anchor: window.BMAP_ANCHOR_TOP_RIGHT,
      })
    )
    this.map.setCurrentCity('天津') // 设置地图显示的城市 此项是必须设置的
    this.map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
    let positionList = [
      { lat: 39.0931965615, lon: 117.2240636608 },
      { lat: 39.0942250123, lon: 117.2238544485 },
      { lat: 39.0948370791, lon: 117.2227279207 },
      { lat: 39.0950006788, lon: 117.220963847 },
      { lat: 39.0950339882, lon: 117.2190541141 },
      { lat: 39.0946842383, lon: 117.2171336525 },
      { lat: 39.0942179024, lon: 117.2153526657 },
      { lat: 39.0936266506, lon: 117.2139042728 },
      { lat: 39.0930187386, lon: 117.2127884739 },
      { lat: 39.0925274087, lon: 117.2125631683 },
      { lat: 39.0914697887, lon: 117.2134214752 },
      { lat: 39.0900578348, lon: 117.2144787922 },
      { lat: 39.0898413078, lon: 117.2153585567 },
      { lat: 39.0898246519, lon: 117.2171395435 },
      { lat: 39.0898746197, lon: 117.21966082 },
      { lat: 39.0900566047, lon: 117.2227872088 },
      { lat: 39.0901398843, lon: 117.2250509932 },
      { lat: 39.0922513729, lon: 117.225259926 },
    ]
    this.drawBikeRoute(positionList)
    this.drwaServiceArea(positionList)
  }
  // 绘制用户的行驶路线
  drawBikeRoute = (positionList) => {
    let map = this.map
    const starticon = require('../../images/start_point.png')
    const endicon = require('../../images/end_point.png')
    let startPoint = ''
    let endPoint = ''
    if (positionList.length > 0) {
      let first = positionList[0]
      let last = positionList[positionList.length - 1]
      startPoint = new window.BMap.Point(first.lon, first.lat)
      let startIcon = new window.BMap.Icon(
        starticon,
        new window.BMap.Size(36, 42),
        {
          imageSize: new window.BMap.Size(36, 42),
          anchor: new window.BMap.Size(18, 42),
        }
      )

      let startMarker = new window.BMap.Marker(startPoint, { icon: startIcon })
      map.addOverlay(startMarker)

      endPoint = new window.BMap.Point(last.lon, last.lat)
      let endIcon = new window.BMap.Icon(
        endicon,
        new window.BMap.Size(36, 42),
        {
          imageSize: new window.BMap.Size(36, 42),
          anchor: new window.BMap.Size(18, 42),
        }
      )
      let endMarker = new window.BMap.Marker(endPoint, { icon: endIcon })
      map.addOverlay(endMarker)

      // 连接路线图
      let trackPoint = []
      for (let i = 0; i < positionList.length; i++) {
        let point = positionList[i]
        trackPoint.push(new window.BMap.Point(point.lon, point.lat))
      }

      let polyline = new window.BMap.Polyline(trackPoint, {
        strokeColor: '#1869AD',
        strokeWeight: 3,
        strokeOpacity: 1,
      })
      map.addOverlay(polyline)
      map.centerAndZoom(endPoint, 16)
    }
  }
  // 绘制服务区
  drwaServiceArea(positionList) {
    // 连接路线图
    let trackPoint = []
    for (let i = 0; i < positionList.length; i++) {
      let point = positionList[i]
      trackPoint.push(new window.BMap.Point(point.lon, point.lat))
    }
    // 绘制服务区
    let polygon = new window.BMap.Polygon(trackPoint, {
      strokeColor: '#CE0000',
      strokeWeight: 4,
      strokeOpacity: 1,
      fillColor: '#ff8605',
      fillOpacity: 0.4,
    })
    this.map.addOverlay(polygon)
  }
  render() {
    return (
      <Fragment>
        <div id="mapcontent" style={{ width: '100%', height: '100%' }}></div>
      </Fragment>
    )
  }
}

export default Map
